import React from 'react';
import { connect } from 'dva';
import {
  Form, Icon, Input, Button, Checkbox,Modal
} from 'antd';

function LoginForm({form,dispatch,registervisible} ){

  function handleSubmit(e) {
    e.preventDefault();
    form.validateFields((err, values) => {
      if (!err) {
        // console.log('Received values of form: ', values);
      }
console.log(values)
      dispatch({
        type:'login/fetch',
        payload:{
          username:values.userName,
            password:values.passWord,
            
        }
    })
 });   
}
  function showRegister(e) { 
      dispatch({
          type:'login/setState',
          payload:{
            registervisible:true
          }
      })
   }
   

  const { getFieldDecorator } = form;
  return (
    <div>
      <Form onSubmit={handleSubmit} className="login-form" layout="vertical">
        <Form.Item   label="账户"  wrapperCol={{ span: 24 }} style={{ marginTop: 20 }}>
          {getFieldDecorator('userName', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="请输入用户名"  />
          )}
        </Form.Item>

        <Form.Item  label="密码"  wrapperCol={{ span: 24 }} style={{ marginTop: 22 }}>
          {getFieldDecorator('passWord', {
            rules: [{ required: true, message: 'Please input your Password!' }],
          })(
            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="请输入密码" />
          )}
        </Form.Item>

      
            <Form.Item  wrapperCol={{ span: 24 }} style={{ marginTop: 22 }}>
          <Button type="primary" htmlType="submit" className="login-form-button" block>
           登录
          </Button>

        </Form.Item>
        
      </Form>
      <Button type="primary"  className="login-form-button" block onClick={showRegister}>
           注册
      </Button>
     
    </div>
  );
}

const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(LoginForm);
export default connect(({ login }) => ({ ...login }))(WrappedNormalLoginForm)
